/**
 * 课程10 热力图
 *
 * map.setLayoutProperty(layerId, 'visibility', 'visible' | 'none');
 *
 */

mapboxgl.accessToken = 'pk.eyJ1IjoiNGgzajgiLCJhIjoiY202cTRneXdpMDlheDJpb21rdGs2M3V6cSJ9.Ifg4pD0p8LxYmxmxwoTBNA';

const map = (window.map = new mapboxgl.Map({
  container: 'map',
  center: [121.74380266722233, 31.097567372835357],
  zoom: 5,
  style: 'mapbox://styles/mapbox/standard',
  minZoom: 5,
  maxZoom: 21
}));


// 热力图
const heatMapLayer = () => {
  let points = [
    [121.48211102197638, 31.22894997464809],
    [121.48343561046238, 31.227123120578284],
    [121.48211102197638, 31.22894997464809],
    [121.48343561046238, 31.227123120578284],
    [121.48211102197638, 31.22894997464809],
    [121.48343561046238, 31.227123120578284],
    [121.48211102197638, 31.22894997464809],
    [121.48343561046238, 31.227123120578284],
    [121.48211102197638, 31.22894997464809],
    [121.48343561046238, 31.227123120578284],
    [121.48211102197638, 31.22894997464809],
    [121.48343561046238, 31.227123120578284],
    [121.48211102197638, 31.22894997464809],
    [121.48343561046238, 31.227123120578284],
    [121.48211102197638, 31.22894997464809],
    [121.48343561046238, 31.227123120578284],
    [121.48211102197638, 31.22894997464809],
    [121.48343561046238, 31.227123120578284],
    [121.48211102197638, 31.22894997464809],
    [121.48343561046238, 31.227123120578284]
  ]



// 2 基础点位数据
  var pointDataGeojson2 = {
    'type': 'FeatureCollection',
    'features': [
      {
        // feature for Mapbox DC
        'type': 'Feature',
        'geometry': {
          'type': 'Point',
          'coordinates': [
            121.48211102197638, 31.22894997464809
          ]
        },
        'properties': {
          'title': 'Mapbox DC',
        }
      },
    ]
  }
  for (let i = 0; i < points.length; i++) {
    let fea = {
      'type': 'Feature',
      'geometry': {
        'type': 'Point',
        'coordinates': points[i]
      },
      'properties': {
        mag: 4,
        'title': 'Mapbox DC',
      }
    }
    pointDataGeojson2.features.push(fea)
  }


// 3 创建数据源并添加
  var pointSource = {
    type: 'geojson',
    data: {
      type: "FeatureCollection",
      features: []
    },
  }
  map.addSource('pointSource', pointSource)
  var point_source = map.getSource('pointSource');
  point_source.setData(pointDataGeojson2)


// 4 创建图层并添加
  var heaetMap = {
    id: 'heaetMapLayer',
    'type': 'heatmap',
    source: 'pointSource',
    'minzoom': 5,
    'maxzoom': 16,
    layout: {
      visibility: 'visible',
    },
    'paint': {
      // Increase the heatmap weight based on frequency and property magnitude
      // interpolate 插值表达式 要求至少有5个参数，分别是表达式名称、插值类型、输入值、判断值、输出值。
      // 热力图影响的范围大小
      'heatmap-weight': [
        'interpolate', //表达式名称 这里用的是插值
        ['linear'], //表达式类型，此处是线性插值
        ['get', 'mag'], //输入值
        0, 0, //两两出现的判断值和输出值
        1, 1,
        2, 10,
        3, 20,
        4, 50,
      ],
      // Increase the heatmap color weight weight by zoom level
      // heatmap-intensity is a multiplier on top of heatmap-weight
      'heatmap-intensity': [
        'interpolate',
        ['linear'],
        ['zoom'],
        0, 1,
        9, 3
      ],
      // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
      // Begin color ramp at 0-stop with a 0-transparancy color
      // to create a blur-like effect.
      'heatmap-color': [
        'interpolate',
        ['linear'],
        ['heatmap-density'],
        0, 'rgba(33,102,172,0)',
        0.2, 'rgb(103,169,207)',
        0.4, 'rgb(209,229,240)',
        0.6, 'rgb(253,219,199)',
        0.8, 'rgb(239,138,98)',
        1, 'rgb(178,24,43)'
      ],
      // Adjust the heatmap radius by zoom level
      'heatmap-radius': [
        'interpolate',
        ['linear'],
        ['zoom'],
        0, 2,
        9, 20
      ],
      // Transition from heatmap to circle layer by zoom level
      'heatmap-opacity': [
        'interpolate',
        ['linear'],
        ['zoom'],
        7, 1,
        9, 0
      ]
    },
  }
  map.addLayer(heaetMap)
}




const main = () => {
  heatMapLayer()
}




map.on('load', () => {
  main()
})
